<template>
  <div>
    <van-nav-bar title="用户中心" />

    <!-- 用户 -->
    <div class="user-info">
      <van-icon class="user-img" name="user-o" />
      <div class="user-name">张三</div>
    </div>

    <!-- 重置 -->
    <div class="user-money">
      <div class="money-info">孝心币:<span class="money-num">2000</span></div>
      <van-button plain type="info" size="small">充值</van-button>
    </div>

    <!-- 按钮 -->
    <div class="user-btn-group">
      <div class="user-btn-h">
        <div class="user-btn">
          <van-icon class="user-btn-icon" name="records" />
          <div>尽孝记录</div>
        </div>
        <div class="user-btn">
          <van-icon class="user-btn-icon" name="location-o" />
          <div>绑定长者</div>
        </div>
        <div class="user-btn">
          <van-icon class="user-btn-icon" name="shield-o" />
          <div>机构动态</div>
        </div>
      </div>
      <div class="user-btn-h">
        <div class="user-btn">
          <van-icon class="user-btn-icon" name="question-o" />
          <div>帮助中心</div>
        </div>
        <div class="user-btn">
          <van-icon class="user-btn-icon" name="notes-o" />
          <div>意见投诉</div>
        </div>
        <div class="user-btn">
          <van-icon class="user-btn-icon" name="hotel-o" />
          <div>绑定手机</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {},
};
</script>

<style>
.user-info {
  margin: 3vh 0;
  color: #3396fc;
}
.user-img {
  font-size: 20vw;
  margin-bottom: 1.5vh;
}
.user-name {
  font-size: 18px;
  font-weight: 700;
}
.user-money {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 2vw 3vw;
}
.money-info {
  font-size: 15px;
  font-weight: 700;
}
.money-num {
  margin: 0 2vw;
}
.user-btn-group {
  border-top: 1px solid #e5e5e5;
  font-weight: 700;
  padding-top: 2vh;
}
.user-btn-h {
  display: flex;
  justify-content: space-around;
  margin-top: 3vh;
}

.user-btn {
  padding: 0.5vw 6vw;
  border: 1px solid #777777;
  border-radius: 5px;
}
.user-btn-icon {
  font-size: 16vw;
}
</style>
